<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
    <title>SportsStore</title>
    <script src="js/angular.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("sportsStore", ["customFilters", "cart", "ngRoute"])
        .config(function ($routeProvider) {

            $routeProvider.when("/complete", {
                templateUrl: "views/thankYou.html"
            });

            $routeProvider.when("/placeorder", {
                templateUrl: "views/placeOrder.html"
            });

            $routeProvider.when("/checkout", {
                templateUrl: "views/checkoutSummary.html"
            });

            $routeProvider.when("/products", {
                templateUrl: "views/productList.html"
            });

            $routeProvider.otherwise({
                templateUrl: "views/productList.html"
            });
        });
    </script>
    <script src="js/sportStore.js"></script>
    <script src="js/customFilters.js"></script>
    <script src="js/productListControllers.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/checkoutControllers.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
    <div class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
        <cartb />
    </div>
    <div class="alert alert-danger" ng-show="data.error">
        Error ({{data.error.status}}). The product data was not loaded.
        <a href="/app.html" class="alert-link">Click here to try again</a>
    </div>
    <ng-view />
</body>
</html>
